<template>
  <van-nav-bar
    title="重置密码"
    left-arrow
    @click-left="onClickLeft"
  />
  <div class="reset-pwd-container">
    <div class="icon-box">
      <van-icon name="lock" size="48" color="#1989fa" />
    </div>
    <p class="tip-text">请通过手机号重置您的登录密码</p>
    <van-form @submit="onSubmit">
      <!-- 手机号码 -->
      <van-field
        v-model="phone"
        name="phone"
        label="手机号码"
        placeholder="请输入手机号码"
        :rules="[{ required: true, message: '请输入手机号码' }, { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码' }]"
        left-icon="phone"
      />
      <!-- 短信验证码 -->
      <van-field
        v-model="code"
        name="code"
        label="短信验证码"
        placeholder="请输入验证码"
        :rules="[{ required: true, message: '请输入验证码' }, { pattern: /^\d{4}$/, message: '请输入正确的验证码' }]"
        left-icon="shield-check"
      >
        <template #button>
          <van-button
            size="small"
            type="primary"
            :disabled="countdown > 0 ||!isPhoneValid"
            @click="getCode"
          >
            {{ countdown > 0? `${countdown}s后重试` : '获取验证码' }}
          </van-button>
        </template>
      </van-field>
      <!-- 设置新密码 -->
      <van-field
        v-model="newPassword"
        name="newPassword"
        label="设置新密码"
        placeholder="请设置新密码(6-16位)"
        :rules="[{ required: true, message: '请设置新密码' }, { pattern: /^.{6,16}$/, message: '请输入6-16位的密码' }]"
        left-icon="lock"
        :type="showPassword ? 'text' : 'password'"
        :eye-button="true"
      >
      <template #right-icon>
            <van-icon
              :name="showPassword ? 'closed-eye' : 'eye-o'"
              @click="showPassword = !showPassword"
            />
          </template>
        </van-field>
      <!-- 确认新密码 -->
      <van-field
        v-model="confirmPassword"
        name="confirmPassword"
        label="确认新密码"
        placeholder="请再次输入新密码"
        :rules="[{ required: true, message: '请再次输入新密码' }, { validator: confirmPwdValidator, message: '两次输入的密码不一致' }]"
        left-icon="lock"
        :type="showPassword1 ? 'text' : 'password'"
        :eye-button="true"
      >
      <template #right-icon>
            <van-icon
              :name="showPassword1 ? 'closed-eye' : 'eye-o'"
              @click="showPassword1 = !showPassword1"
            />
          </template>
        </van-field>
      <div style="padding: 16px;">
        <van-button
          round
          block
          type="primary"
          native-type="submit"
          @click="onSubmit"
        >
          确认重置
        </van-button>
      </div>
    </van-form>
    <p class="service-tip">如果有任何问题，请联系客服</p>
    <p class="service-phone">400-123-4567</p>
  </div>
</template>

<script setup>
import { ref, computed,onMounted } from 'vue';
import { showToast } from 'vant';
import {
	sendSMS, resetPassword
} from '/@/api/auth/ytb.ts'
import {useRoute,useRouter} from 'vue-router'
const route = useRoute()
const router = useRouter()
const phone = ref('');
const code = ref('');
const newPassword = ref('');
const confirmPassword = ref('');
const countdown = ref(0);
const showPassword = ref(false);
const showPassword1 = ref(false);

// 计算手机号码是否有效
const isPhoneValid = computed(() => {
  const reg = /^1[3-9]\d{9}$/;
  return reg.test(phone.value);
});

// 获取验证码逻辑
const getCode = () => {
  if (isPhoneValid.value && countdown.value === 0) {
    countdown.value = 60;
    const timer = setInterval(() => {
      if (countdown.value > 0) {
        countdown.value--;
      } else {
        clearInterval(timer);
      }
    }, 1000);
    getVficationCode()
  }
};

// 确认密码校验函数
const confirmPwdValidator = (value) => {
  return value === newPassword.value;
};

// 验证码接口
const getVficationCode = async() => {
  const res = await sendSMS({
    phone: phone.value,
  })
  showToast(res.msg)
}
// 表单提交逻辑
const onSubmit = async() => {
  console.log('提交数据：', { phone: phone.value, code: code.value, newPassword: newPassword.value });
  if(!phone.value) {
      showToast('请填写手机号') 
      return
    }
    if(!code.value) {
      showToast('请填写验证码')
      return
    }
    if(!newPassword.value) {
      showToast('请填写新密码')
      return
    }
    if(!confirmPassword.value) {
      showToast('请填写旧密码')
      return
    }
    const res = await resetPassword({ phone: phone.value, code: code.value, password: newPassword.value })
    if(res.code == 200){
      router.replace({ name: 'login', query: { } })
    }
    showToast(res.msg)
};

// 左侧返回按钮逻辑
const onClickLeft = () => {
  router.back()
};
</script>

<style scoped>
.reset-pwd-container {
  padding: 16px;
}
.icon-box {
  text-align: center;
  margin-bottom: 12px;
}
.tip-text {
  text-align: center;
  color: #666;
  margin-bottom: 24px;
}
.service-tip {
  text-align: center;
  color: #999;
  margin-top: 24px;
  margin-bottom: 4px;
}
.service-phone {
  text-align: center;
  color: #999;
}
</style>